<template>
	<view class="register-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="nav-title">用户注册</view>
			<view class="nav-right"></view>
		</view>

		<view class="register-content">
			<!-- logo/欢迎语 -->
			<view class="register-header">
				<image class="logo" src="/static/img/avatar.png" mode="aspectFit"></image>
				<text class="welcome-text">欢迎注册</text>
			</view>

			<!-- 注册表单 -->
			<view class="register-form">
				<view class="form-item">
					<text class="item-label">用户名</text>
					<input class="item-input" type="text" placeholder="请输入用户名" v-model="username" />
				</view>

				<view class="form-item">
					<text class="item-label">昵称</text>
					<input class="item-input" type="text" placeholder="请输入昵称" v-model="nickname" />
				</view>

				<view class="form-item">
					<text class="item-label">手机号</text>
					<input class="item-input" type="number" placeholder="请输入手机号" v-model="phone" maxlength="11" />
				</view>

				<view class="form-item">
					<text class="item-label">密码</text>
					<input class="item-input" type="password" placeholder="请输入密码" v-model="password" />
				</view>

				<view class="form-item">
					<text class="item-label">确认密码</text>
					<input class="item-input" type="password" placeholder="请再次输入密码" v-model="confirmPassword" />
				</view>

				<button class="register-btn" :class="{active: isFormValid}" @click="handleRegister">注册</button>

				<view class="login-tip">
					已有账号? <text class="login-link" @click="navigateToLogin">立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				nickname: '',
				phone: '',
				password: '',
				confirmPassword: ''
			}
		},
		computed: {
			isFormValid() {
				return this.username && this.nickname && this.phone && this.password &&
					this.confirmPassword && this.password === this.confirmPassword &&
					this.isValidPhone(this.phone);
			}
		},
		methods: {
			// 验证手机号格式
			isValidPhone(phone) {
				return /^1[3-9]\d{9}$/.test(phone);
			},

			async request(url, method = 'GET', data = {}) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:8080' + url, // 根据实际后端地址修改
						method,
						data,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			async handleRegister() {
				// 表单验证
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}

				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!this.isValidPhone(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '注册中...',
					mask: true
				});

				try {
					const params = {
						username: this.username,
						nickname: this.nickname,
						phone: this.phone,
						password: this.password
					};

					const result = await this.request('/user/register', 'POST', params);
					console.log('注册响应:', result);

					// 隐藏加载
					uni.hideLoading();

					// 处理注册结果
					if (result.code === 200) {
						// 注册成功
						uni.showToast({
							title: result.msg || '注册成功',
							icon: 'success'
						});

						// 自动填充登录信息
						uni.setStorageSync('registerInfo', {
							username: this.username,
							password: this.password
						});

						// 跳转到登录页面
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}, 1500);

					} else {
						// 注册失败
						uni.showToast({
							title: result.msg || '注册失败',
							icon: 'none'
						});
					}
				} catch (error) {
					// 隐藏加载
					uni.hideLoading();

					// 网络错误或服务器错误
					console.error('注册请求失败:', error);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			},
			navigateToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
	.register-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 88rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.nav-left {
		display: flex;
		align-items: center;
		width: auto;
		margin-top: 120rpx;
	}

	.back-icon {
		font-size: 50rpx;
		color: #333;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
	}

	.register-content {
		padding: 40rpx;
	}

	.register-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 80rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #eee;
		margin-bottom: 30rpx;
	}

	.welcome-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.register-form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.item-label {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.item-input {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #e0e0e0;
		padding: 10rpx 0;
		font-size: 32rpx;
	}

	.register-btn {
		width: 100%;
		height: 90rpx;
		background-color: #f0f0f0;
		color: #999;
		border-radius: 45rpx;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-top: 40rpx;
	}

	.register-btn.active {
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		color: #fff;
	}

	.login-tip {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		margin-top: 40rpx;
	}

	.login-link {
		color: #007AFF;
		margin-left: 15rpx;
	}
</style>